<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>

</head>
<body>
    <form id="login_form">
        <input type="text" id="username"> <br>
        <input type="email" id="email">
        <button type="button" id="btn_login">login</button>
    </form>

    <!--    引入jquery框架-->
    <script src="/boot/plugins/jquery/jquery.min.js"></script>
    <script>
        $(function(){
           //$("#btn_login").click(function(){});
            $("#btn_login").click(function(){
                //将文本框中输入的数据发送到后端
                //①将文本框中的数据分别获取一下
                let username = $("#username").val();
                let email = $("#email").val();
                //console.log(username,email);

                //②拼接url地址
                //url?key1=参数1&key2=参数2&key3=参数3....
                // /boot/ajax/hello01?uname=admin&email=sss
                //let url = '/boot/ajax/hello01?uname='+username+'&email='+email;

                ///boot/ajax/hello01?uname=admin&email=ssss

                //es6 - 模板字符串 - 简化字符串的拼接
                let url = `/boot/ajax/hello01?uname=${username}&email=${email}`;

                //③发送ajax - get请求
                //请求的参数key-value形式
                $.get(url,function(res){
                    //res就是server响应给客户端的json数据
                    console.log(res)
                    //js处理json
                    //js操作dom
                    console.log(res.data)
                })
            });
        })
    </script>
</body>
</html>